<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>静态服务器 | Guru Note</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="stylesheet" href="./font/index.css">
    <script src="/docs/icon/svg.js"></script>
    <meta name="description" content="Sea of dawn">
    
    <link rel="preload" href="/docs/assets/css/0.styles.efa081cd.css" as="style"><link rel="preload" href="/docs/assets/js/app.cdec4db9.js" as="script"><link rel="preload" href="/docs/assets/js/2.993bd611.js" as="script"><link rel="preload" href="/docs/assets/js/96.2b1e8485.js" as="script"><link rel="preload" href="/docs/assets/js/7.5a12abef.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.c3177bdb.js"><link rel="prefetch" href="/docs/assets/js/100.60c23478.js"><link rel="prefetch" href="/docs/assets/js/101.7ea29e1b.js"><link rel="prefetch" href="/docs/assets/js/102.7f47e485.js"><link rel="prefetch" href="/docs/assets/js/103.ea9ce400.js"><link rel="prefetch" href="/docs/assets/js/104.4ec6a518.js"><link rel="prefetch" href="/docs/assets/js/105.75526347.js"><link rel="prefetch" href="/docs/assets/js/106.01f6b03b.js"><link rel="prefetch" href="/docs/assets/js/107.69fe0811.js"><link rel="prefetch" href="/docs/assets/js/108.fa23768b.js"><link rel="prefetch" href="/docs/assets/js/109.90df1698.js"><link rel="prefetch" href="/docs/assets/js/11.54347528.js"><link rel="prefetch" href="/docs/assets/js/110.dd8d7227.js"><link rel="prefetch" href="/docs/assets/js/111.ccf25ceb.js"><link rel="prefetch" href="/docs/assets/js/112.6963298f.js"><link rel="prefetch" href="/docs/assets/js/113.30ceb3d8.js"><link rel="prefetch" href="/docs/assets/js/114.42ef6603.js"><link rel="prefetch" href="/docs/assets/js/115.f1db7817.js"><link rel="prefetch" href="/docs/assets/js/116.92971223.js"><link rel="prefetch" href="/docs/assets/js/117.c5a65e7e.js"><link rel="prefetch" href="/docs/assets/js/118.e329035d.js"><link rel="prefetch" href="/docs/assets/js/119.cbb17c5e.js"><link rel="prefetch" href="/docs/assets/js/12.c8144ee8.js"><link rel="prefetch" href="/docs/assets/js/120.8537f6a6.js"><link rel="prefetch" href="/docs/assets/js/121.257d3851.js"><link rel="prefetch" href="/docs/assets/js/122.96a5f921.js"><link rel="prefetch" href="/docs/assets/js/123.2220fd12.js"><link rel="prefetch" href="/docs/assets/js/124.552b1a29.js"><link rel="prefetch" href="/docs/assets/js/125.4e36fe37.js"><link rel="prefetch" href="/docs/assets/js/126.3939cdcc.js"><link rel="prefetch" href="/docs/assets/js/127.014df434.js"><link rel="prefetch" href="/docs/assets/js/13.edc237a8.js"><link rel="prefetch" href="/docs/assets/js/14.66270d4f.js"><link rel="prefetch" href="/docs/assets/js/15.0804164b.js"><link rel="prefetch" href="/docs/assets/js/16.dec928ab.js"><link rel="prefetch" href="/docs/assets/js/17.bbfc90a8.js"><link rel="prefetch" href="/docs/assets/js/18.76904860.js"><link rel="prefetch" href="/docs/assets/js/19.80a98011.js"><link rel="prefetch" href="/docs/assets/js/20.c39e42bd.js"><link rel="prefetch" href="/docs/assets/js/21.287b744a.js"><link rel="prefetch" href="/docs/assets/js/22.c9506be7.js"><link rel="prefetch" href="/docs/assets/js/23.9732a229.js"><link rel="prefetch" href="/docs/assets/js/24.21ed1f05.js"><link rel="prefetch" href="/docs/assets/js/25.8f1926f6.js"><link rel="prefetch" href="/docs/assets/js/26.61b6eb9f.js"><link rel="prefetch" href="/docs/assets/js/27.3706753c.js"><link rel="prefetch" href="/docs/assets/js/28.b6b182cf.js"><link rel="prefetch" href="/docs/assets/js/29.ae979ad9.js"><link rel="prefetch" href="/docs/assets/js/3.a7f8dd77.js"><link rel="prefetch" href="/docs/assets/js/30.f2233269.js"><link rel="prefetch" href="/docs/assets/js/31.06780314.js"><link rel="prefetch" href="/docs/assets/js/32.2dad91d1.js"><link rel="prefetch" href="/docs/assets/js/33.87ec6e22.js"><link rel="prefetch" href="/docs/assets/js/34.7b75f220.js"><link rel="prefetch" href="/docs/assets/js/35.3184991f.js"><link rel="prefetch" href="/docs/assets/js/36.28248fbe.js"><link rel="prefetch" href="/docs/assets/js/37.5824a979.js"><link rel="prefetch" href="/docs/assets/js/38.99a364fe.js"><link rel="prefetch" href="/docs/assets/js/39.a5f43732.js"><link rel="prefetch" href="/docs/assets/js/4.a55d89ed.js"><link rel="prefetch" href="/docs/assets/js/40.629f78f7.js"><link rel="prefetch" href="/docs/assets/js/41.e4f58d1c.js"><link rel="prefetch" href="/docs/assets/js/42.9f41aa47.js"><link rel="prefetch" href="/docs/assets/js/43.636412b6.js"><link rel="prefetch" href="/docs/assets/js/44.3b491aef.js"><link rel="prefetch" href="/docs/assets/js/45.77df19bc.js"><link rel="prefetch" href="/docs/assets/js/46.01f53ddd.js"><link rel="prefetch" href="/docs/assets/js/47.476e85c9.js"><link rel="prefetch" href="/docs/assets/js/48.198502dc.js"><link rel="prefetch" href="/docs/assets/js/49.0d59d332.js"><link rel="prefetch" href="/docs/assets/js/5.1597c0f8.js"><link rel="prefetch" href="/docs/assets/js/50.02baf101.js"><link rel="prefetch" href="/docs/assets/js/51.c9fbd54d.js"><link rel="prefetch" href="/docs/assets/js/52.4cb4459b.js"><link rel="prefetch" href="/docs/assets/js/53.248450d7.js"><link rel="prefetch" href="/docs/assets/js/54.83f12d1e.js"><link rel="prefetch" href="/docs/assets/js/55.b18accba.js"><link rel="prefetch" href="/docs/assets/js/56.8a160b09.js"><link rel="prefetch" href="/docs/assets/js/57.b854a940.js"><link rel="prefetch" href="/docs/assets/js/58.4500f315.js"><link rel="prefetch" href="/docs/assets/js/59.59400e36.js"><link rel="prefetch" href="/docs/assets/js/6.887ba020.js"><link rel="prefetch" href="/docs/assets/js/60.4dd5b5bb.js"><link rel="prefetch" href="/docs/assets/js/61.50d8c8f6.js"><link rel="prefetch" href="/docs/assets/js/62.17d10daa.js"><link rel="prefetch" href="/docs/assets/js/63.d5f821cc.js"><link rel="prefetch" href="/docs/assets/js/64.7bf2519f.js"><link rel="prefetch" href="/docs/assets/js/65.0a1c9bc8.js"><link rel="prefetch" href="/docs/assets/js/66.1bcaa81c.js"><link rel="prefetch" href="/docs/assets/js/67.326bdf9b.js"><link rel="prefetch" href="/docs/assets/js/68.2b3b63b2.js"><link rel="prefetch" href="/docs/assets/js/69.c9b1a1a9.js"><link rel="prefetch" href="/docs/assets/js/70.a5fede78.js"><link rel="prefetch" href="/docs/assets/js/71.288d9643.js"><link rel="prefetch" href="/docs/assets/js/72.8665d6b8.js"><link rel="prefetch" href="/docs/assets/js/73.47155429.js"><link rel="prefetch" href="/docs/assets/js/74.4d4738f8.js"><link rel="prefetch" href="/docs/assets/js/75.659a325f.js"><link rel="prefetch" href="/docs/assets/js/76.a263f692.js"><link rel="prefetch" href="/docs/assets/js/77.9d86d59e.js"><link rel="prefetch" href="/docs/assets/js/78.a41b5d88.js"><link rel="prefetch" href="/docs/assets/js/79.5d0fc4cc.js"><link rel="prefetch" href="/docs/assets/js/8.80d0c81d.js"><link rel="prefetch" href="/docs/assets/js/80.01a11f6a.js"><link rel="prefetch" href="/docs/assets/js/81.9c0207d9.js"><link rel="prefetch" href="/docs/assets/js/82.12be8e04.js"><link rel="prefetch" href="/docs/assets/js/83.00fa5f46.js"><link rel="prefetch" href="/docs/assets/js/84.f14cd53c.js"><link rel="prefetch" href="/docs/assets/js/85.e9d7c0d1.js"><link rel="prefetch" href="/docs/assets/js/86.eb78fbbf.js"><link rel="prefetch" href="/docs/assets/js/87.8a31f5ae.js"><link rel="prefetch" href="/docs/assets/js/88.0f10e6dc.js"><link rel="prefetch" href="/docs/assets/js/89.a17253c9.js"><link rel="prefetch" href="/docs/assets/js/9.2fa568cb.js"><link rel="prefetch" href="/docs/assets/js/90.e56bc609.js"><link rel="prefetch" href="/docs/assets/js/91.5277db18.js"><link rel="prefetch" href="/docs/assets/js/92.b0bb8aa7.js"><link rel="prefetch" href="/docs/assets/js/93.cd790b77.js"><link rel="prefetch" href="/docs/assets/js/94.76bbe227.js"><link rel="prefetch" href="/docs/assets/js/95.4f07ca32.js"><link rel="prefetch" href="/docs/assets/js/97.e93b3461.js"><link rel="prefetch" href="/docs/assets/js/98.658063a1.js"><link rel="prefetch" href="/docs/assets/js/99.a3642e6d.js">
    <link rel="stylesheet" href="/docs/assets/css/0.styles.efa081cd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><!----> <span class="site-name">Guru Note</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----> <svg aria-hidden="true" class="icon search-icon"><use xlink:href="#icon-search"></use></svg></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link router-link-active">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><div class="el-scrollbar"><div class="scrollbar-wrapper el-scrollbar__wrap el-scrollbar__wrap--hidden-default"><div class="el-scrollbar__view"><nav class="nav-links"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link router-link-active">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/docs/node/" aria-current="page" class="sidebar-link">介绍</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Node.js 基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/node/technology-architecture.html" class="sidebar-link">Node.js 技术架构</a></li><li><a href="/docs/node/fs-file.html" class="sidebar-link">文件模块</a></li><li><a href="/docs/node/static-server.html" aria-current="page" class="active sidebar-link">静态服务器</a></li><li><a href="/docs/node/fanyi.html" class="sidebar-link">命令行翻译工具</a></li><li><a href="/docs/node/operational-database.html" class="sidebar-link">操作数据库</a></li></ul></section></li></ul> </div></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div></div></aside> <main class="page"> <div class="re-page-top"><h1 class="title"><span>静态服务器</span></h1> <div class="re-page-index"><div class="page-index-title"><span class="open-catalog"><svg aria-hidden="true" class="icon arrow-right"><use xlink:href="#icon-bold-right"></use></svg> <span class="text">目录</span></span></div> <div class="page-index-content"><div class="page-catalog" style="display:none;"><div class="synopsis-wrap"><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/node/static-server.html#安装-ts-node-dev" class="synopsis-link">安装 ts-node-dev</a></li><li class="synopsis-li"><a href="/docs/node/static-server.html#创建一个-http-服务器" class="synopsis-link">创建一个 http 服务器</a></li><li class="synopsis-li"><a href="/docs/node/static-server.html#获取-post-请求的数据" class="synopsis-link">获取 POST 请求的数据</a></li><li class="synopsis-li"><a href="/docs/node/static-server.html#根据-url-返回不同文件" class="synopsis-link">根据 url 返回不同文件</a></li><li class="synopsis-li"><a href="/docs/node/static-server.html#处理路径中的查询参数" class="synopsis-link">处理路径中的查询参数</a></li><li class="synopsis-li"><a href="/docs/node/static-server.html#处理非-get-请求" class="synopsis-link">处理非 GET 请求</a></li><li class="synopsis-li"><a href="/docs/node/static-server.html#设置文件缓存时间" class="synopsis-link">设置文件缓存时间</a></li></ul></div></div></div></div></div> <div class="theme-default-content content__default"><h2 id="安装-ts-node-dev"><a href="#安装-ts-node-dev" class="header-anchor">#</a> 安装 ts-node-dev</h2> <p>支持 ts 的 node 静态服务器</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">yarn</span> global <span class="token function">add</span> ts-node-dev
</code></pre></div><h2 id="创建一个-http-服务器"><a href="#创建一个-http-服务器" class="header-anchor">#</a> 创建一个 http 服务器</h2> <p>监听本地端口</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> http <span class="token keyword">from</span> <span class="token string">&quot;http&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>IncomingMessage<span class="token punctuation">,</span> ServerResponse<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;http&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> server <span class="token operator">=</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 每次请求，都会触发箭头函数</span>
server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'request'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>request<span class="token operator">:</span> IncomingMessage<span class="token punctuation">,</span> response<span class="token operator">:</span> ServerResponse<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> method<span class="token punctuation">,</span> url<span class="token punctuation">,</span> headers <span class="token punctuation">}</span> <span class="token operator">=</span> request
  response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'hi'</span> <span class="token operator">+</span> <span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 结束响应</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 监听本地 8888 端口</span>
server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8888</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>运行 ts-node-dev 插件</p> <div class="language-sh extra-class"><pre class="language-sh"><code>ts-node-dev index.ts
</code></pre></div><p>使用 curl 命令请求 8888 端口的地址</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">curl</span> -v http://localhost:8888/demo
</code></pre></div><p>可以在 <code>server.listen(port)</code> 中传入一个回调函数，获取监听信息</p> <div class="language-ts extra-class"><pre class="language-ts"><code>server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8888</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>server<span class="token punctuation">.</span><span class="token function">address</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 监听信息</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="获取-post-请求的数据"><a href="#获取-post-请求的数据" class="header-anchor">#</a> 获取 POST 请求的数据</h2> <p>模拟 POST 请求，只要加一个 <code>-d &quot;name=Ject&quot;</code> 即可</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">curl</span> -v -d <span class="token string">&quot;name=Ject&quot;</span> http://localhost:8888/
</code></pre></div><p>通过监听 request 的 data、end 事件处理数据（数据是分段上传的，所以要放在数组中处理）</p> <div class="language-ts extra-class"><pre class="language-ts"><code>server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'request'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>request<span class="token operator">:</span> IncomingMessage<span class="token punctuation">,</span> response<span class="token operator">:</span> ServerResponse<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
  request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'data'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>chunk<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    array<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>chunk<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'end'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> body <span class="token operator">=</span> Buffer<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// name=Ject</span>
    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'hi'</span> <span class="token operator">+</span> <span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8888</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>可以在 end 事件中修改响应头内容</p> <div class="language-ts extra-class"><pre class="language-ts"><code>request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'end'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> body <span class="token operator">=</span> Buffer<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  response<span class="token punctuation">.</span>statusCode <span class="token operator">=</span> <span class="token number">404</span>
  response<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'T-avengers'</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">I'm Iron Man</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
  response<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'1\n'</span><span class="token punctuation">)</span>
  response<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'2\n'</span><span class="token punctuation">)</span>
  response<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'3\n'</span><span class="token punctuation">)</span>
  response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 结束相应</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>使用 <code>curl -v http://localhost:8888/demo</code> 请求会返回以下内容</p> <div class="language-sh extra-class"><pre class="language-sh"><code>*   Trying ::1:8888<span class="token punctuation">..</span>.
* Connected to localhost <span class="token punctuation">(</span>::1<span class="token punctuation">)</span> port <span class="token number">8888</span> <span class="token punctuation">(</span><span class="token comment">#0)</span>
<span class="token operator">&gt;</span> GET /demo HTTP/1.1
<span class="token operator">&gt;</span> Host: localhost:8888
<span class="token operator">&gt;</span> User-Agent: curl/7.73.0
<span class="token operator">&gt;</span> Accept: */*
<span class="token operator">&gt;</span>
* Mark bundle as not supporting multiuse
<span class="token operator">&lt;</span> HTTP/1.1 <span class="token number">404</span> Not Found
<span class="token operator">&lt;</span> T-avengers: I'm Iron Man
<span class="token operator">&lt;</span> Date: Wed, <span class="token number">24</span> Mar <span class="token number">2021</span> <span class="token number">13</span>:59:57 GMT
<span class="token operator">&lt;</span> Connection: keep-alive
<span class="token operator">&lt;</span> Keep-Alive: <span class="token assign-left variable">timeout</span><span class="token operator">=</span><span class="token number">5</span>
<span class="token operator">&lt;</span> Transfer-Encoding: chunked
<span class="token operator">&lt;</span>
<span class="token number">1</span>
<span class="token number">2</span>
<span class="token number">3</span>
* Connection <span class="token comment">#0 to host localhost left intact</span>
</code></pre></div><h2 id="根据-url-返回不同文件"><a href="#根据-url-返回不同文件" class="header-anchor">#</a> 根据 url 返回不同文件</h2> <p>案例代码</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> http <span class="token keyword">from</span> <span class="token string">&quot;http&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>IncomingMessage<span class="token punctuation">,</span> ServerResponse<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;http&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> fs <span class="token keyword">from</span> <span class="token string">&quot;fs&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> p <span class="token keyword">from</span> <span class="token string">&quot;path&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> server <span class="token operator">=</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// relative 表示拼接两个路径， __dirname: 表示当前文件绝对路径</span>
<span class="token keyword">const</span> publicDir <span class="token operator">=</span> p<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'public'</span><span class="token punctuation">)</span>

server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'request'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>request<span class="token operator">:</span> IncomingMessage<span class="token punctuation">,</span> response<span class="token operator">:</span> ServerResponse<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> method<span class="token punctuation">,</span> url<span class="token punctuation">,</span> headers <span class="token punctuation">}</span> <span class="token operator">=</span> request
  <span class="token keyword">switch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token string">'/index.html'</span><span class="token operator">:</span>
      fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>publicDir<span class="token punctuation">,</span> <span class="token string">'index.html'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>error<span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token keyword">throw</span> error
        response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">'/style.css'</span><span class="token operator">:</span>
      response<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Content-Type'</span><span class="token punctuation">,</span> <span class="token string">'text/css; charset=utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>publicDir<span class="token punctuation">,</span> <span class="token string">'style.css'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>error<span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token keyword">throw</span> error
        response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">'/main.js'</span><span class="token operator">:</span>
      response<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Content-Type'</span><span class="token punctuation">,</span> <span class="token string">'text/javascript; charset=utf-8'</span><span class="token punctuation">)</span>
      fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>publicDir<span class="token punctuation">,</span> <span class="token string">'main.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>error<span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token keyword">throw</span> error
        response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="处理路径中的查询参数"><a href="#处理路径中的查询参数" class="header-anchor">#</a> 处理路径中的查询参数</h2> <p>默认情况下，如果文件路径附带查询参数，会导致上面的代码跳转失败，可以使用 url.parse 解决这个问题</p> <div class="language-ts extra-class"><pre class="language-ts"><code>server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'request'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>request<span class="token operator">:</span> IncomingMessage<span class="token punctuation">,</span> response<span class="token operator">:</span> ServerResponse<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> method<span class="token punctuation">,</span> url<span class="token operator">:</span> path<span class="token punctuation">,</span> headers <span class="token punctuation">}</span> <span class="token operator">=</span> request
  <span class="token keyword">const</span> <span class="token punctuation">{</span> pathname<span class="token punctuation">,</span> search <span class="token punctuation">}</span> <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>path<span class="token punctuation">)</span> <span class="token comment">// 获取不带查询参数的请求路径，及查询参数</span>
  <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>pathname<span class="token punctuation">,</span> search<span class="token punctuation">)</span> <span class="token comment">// &quot;/index.html&quot;, &quot;?id=1007&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>处理完查询参数后，上面根据获取路径的文件的代码可以优化为如下两行（不考虑 <code>Content-Type</code> 属性的情况）</p> <div class="language-js extra-class"><pre class="language-js"><code>fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>publicDir<span class="token punctuation">,</span> filename<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>最新版已弃用 <code>url.parse()</code> 使用 <code>new URL()</code> 代替，<a href="https://nodejs.org/docs/latest-v12.x/api/http.html#http_message_url" target="_blank" rel="noopener noreferrer">官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token punctuation">{</span>method<span class="token punctuation">,</span> url<span class="token operator">:</span> path<span class="token punctuation">,</span> headers<span class="token punctuation">}</span> <span class="token operator">=</span> request<span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span>pathname<span class="token punctuation">,</span> search<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">http://</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>headers<span class="token punctuation">.</span>host<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>使用 curl 添加查询参数请求</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">curl</span> -v http://localhost:8888/index.html?id<span class="token operator">=</span><span class="token number">1007</span>
</code></pre></div><h2 id="处理非-get-请求"><a href="#处理非-get-请求" class="header-anchor">#</a> 处理非 GET 请求</h2> <p>假如首页有以下表单</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/form<span class="token punctuation">&quot;</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>post<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>用户名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>为了防止发送该请求，可以添加以下内容</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>method <span class="token operator">!==</span> <span class="token string">'GET'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  response<span class="token punctuation">.</span>statusCode <span class="token operator">=</span> <span class="token number">405</span><span class="token punctuation">;</span>
  response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'这是一个假响应'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>处理其他错误</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  response<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Content-Type'</span><span class="token punctuation">,</span> <span class="token string">'text/html; charset=utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>errno <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">4058</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    response<span class="token punctuation">.</span>statusCode <span class="token operator">=</span> <span class="token number">404</span><span class="token punctuation">;</span>
    fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>publicDir<span class="token punctuation">,</span> <span class="token string">'404.html'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>errno <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">4068</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    response<span class="token punctuation">.</span>statusCode <span class="token operator">=</span> <span class="token number">403</span><span class="token punctuation">;</span>
    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'没有权限访问该目录'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    response<span class="token punctuation">.</span>statusCode <span class="token operator">=</span> <span class="token number">500</span><span class="token punctuation">;</span>
    response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'服务器繁忙，请稍后再试'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="设置文件缓存时间"><a href="#设置文件缓存时间" class="header-anchor">#</a> 设置文件缓存时间</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 请求成功后，添加 setHeader</span>
<span class="token keyword">let</span> cacheAge <span class="token operator">=</span> <span class="token number">3600</span> <span class="token operator">*</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">365</span><span class="token punctuation">;</span> <span class="token comment">// 缓存 1 年</span>
response<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">'Cache-Control'</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">public, max-age=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>cacheAge<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
response<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>这样请求过的文件再次请求就会直接读取本地缓存</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新：</span><span class="time">2021-03-27 20:56</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><svg aria-hidden="true" class="icon"><use xlink:href="#icon-left"></use></svg> <a href="/docs/node/fs-file.html" class="prev">文件模块</a></span> <span class="next"><a href="/docs/node/fanyi.html">命令行翻译工具</a> <svg aria-hidden="true" class="icon"><use xlink:href="#icon-right"></use></svg></span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/docs/assets/js/app.cdec4db9.js" defer></script><script src="/docs/assets/js/2.993bd611.js" defer></script><script src="/docs/assets/js/96.2b1e8485.js" defer></script><script src="/docs/assets/js/7.5a12abef.js" defer></script>
  </body>
</html>
